<template>
    <div class="details-box">
        <!-- 顶部导航 -->
    <van-nav-bar title="手记详情" 
       left-arrow
       @click-left="back"
       
       >

           <!-- 使用插槽可自定图标样式 -->
            <template #right>
                <div class="share">
                    
                <van-cell @click="showShare = true" />
                <van-share-sheet
                  v-model="showShare"
                  
                  :options="options"
                  @select="onSelect"
                />
              
                
                </div>
            </template>
        </van-nav-bar>
    

    <div class="scoll">
    <div class="top-box">
        <div class="usermsg"><div class="touxiang"><img :src="user.avatar" alt="" @click="go(user.id)"></div><div><div class="usname">{{user.username}}</div><span style="color:#b4b4b4">发布于 {{Details.addtime*1000|time}}</span></div></div>
        <div class="follow" @click="guanzhu"> + 关注</div>
    </div>
    
         <van-swipe class="my-swipe"  indicator-color="red" >
        <van-swipe-item v-for="item in bannerList" :key="item.id" >
            <img :src="item" alt="" srcset=""   width="100%" style="display:'block'">
     
            
        </van-swipe-item>
       
        </van-swipe>

        <div class="main-box">
            <div class="title">{{Details.title}}</div>
            <div class="content">{{Details.content}}</div>
        </div>

        <div class="line"></div>
        <div class="comment">
            
                <div class="total">{{total}} 评论 </div>
                <div class="com-main" v-for="item in commentlist" :key="item.id">
                    <div class="com-icon"><img :src="item.userDetail.avatar_small" alt=""></div>
                    <div class="com-content">
                        <div class="cont-top"><div>{{item.userDetail.nickname}}</div><div ><img src="../assets/point.png" alt=""></div></div>
                        <div class="cont-middle">{{item.contentText}}</div>
                        <div class="cont-bottom"><div>{{item.createTimeUnix|time}}</div><div @click="good">{{item.likeCount}}  <van-icon name="good-job-o" /></div></div>
                    </div>
                </div>
           

            <div class="nomore">没有更多评论</div>

        </div>

        <div class="bottom">
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4}"
                autocomplete
                placeholder="我有话要说"
                
                v-model="textear1">

            </el-input>
            <div class="btn"  @click="send">发送</div> 
        </div>

    </div>
    </div>
</template>

<script>

    import { Toast } from 'vant';


    export default {
        name:'Notesdetails',

        data(){
            return{
                total:[],
                Details:[],
                user:[],
                id:'',
                bannerList:[],
                textear1: '',
                commentlist:[],
                showShare: false,
                localtime:'',
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
  
            }
        },
        components:{
        Toast,

        },

         filters:{

             year(val){
                 let time = new Date(val)                  
                
        },        
        },

        created(){
             this.id = this.$route.query.id;
            this.getDetails()
            this.getComment()

        },

       mounted(){
           
        },
        methods:{
            go(id){
              this.$router.push({name:'author',query:{id:id}})
            },
            getDetails(){
             this.axios({

              
                // 请求类型
                method:'get',
                // 请求路径 详情内容
                 url:'https://apis.netstart.cn/xpc/note/'+this.id

            }).then(result =>{
                this.Details=result.data.data
                this.user=result.data.data.user
                this.bannerList=result.data.data.images           
                
            }).catch(err =>{
                 
            }) 
            },

            getComment(){
                this.axios({

              
                // 请求类型
                method:'get',
                // 请求路径 详情内容
                 url:'https://apis.netstart.cn/xpc/note/'+this.id+'/comment'

            }).then(result =>{
                this.commentlist=result.data.data
                this.total=result.data.total
               
                
                
            }).catch(err =>{
                 
            })

            },

        send(){

            this.localtime = new Date().getTime()
            
            let isLogin = JSON.parse(localStorage.getItem("toke"));
            
                if(isLogin===null){
                    Toast("请先登录")
                    this.$router.push({name:'Login'})
            }else{
                this.total+=1
                let myInfo = {
                userDetail:{
                    avatar_small:'https://img1.baidu.com/it/u=2884823941,3795133154&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                    nickname:isLogin.arr.nickName,                  
                                       
                },
                 createTimeUnix:this.localtime,
                 likeCount: 0 ,
                 contentText:this.textear1
            }

            

           this.commentlist.push(myInfo)
            }
            
            this.textear1=''


        },
        
        good(){
            
        },
        guanzhu(){
            
        },

        back(){
            this.$router.go(-1)
        },

        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },



        },

    }
</script>

<style lang="less" >

    .details-box{
       background-color: rgb(255, 255, 255);
      

     .van-nav-bar__content{
       
        border-bottom: 1px solid rgb(216, 213, 213);
    }


    .van-nav-bar .van-icon {
    color: #000000;
    }


    .share{
        display: flex;
        
        .van-cell{
            background-image: url(../assets/share.png);
            background-repeat: no-repeat;
            background-position:center;
        }


    }

    .scoll{
        height:calc(100vh - 93px);
       overflow: auto;
       position: relative;
    }

     


    // top-box star
    .top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        
        .usermsg{
            display: flex;
            align-items: center;

            .touxiang{
                width: 40px;
                height: 40px;
                border-radius: 50%;  
                margin-right: 10px;
            }

            img{
                width: 40px;
                height: 40px;
                border-radius: 50%;  
            }

            .usname{
                font-size: 15px;
                margin-bottom: 5px;
            }


        }


        .follow{
            text-align: center;
            line-height: 25px;
            width: 60px;
            height: 25px;
            color: rgb(240, 57, 57);
            border: 1px solid rgb(240, 57, 57);
            border-radius: 15px;
        }

       

       

        
    }
    // top-box end

    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    
    text-align: center;
    
  }
    // mian-box star
    .main-box{
        padding: 10px;


    .title{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        transform: translate();
    }

    .content{

        color: rgb(147, 147, 147);
    }



    }
    // main-box end
     .line{
        height: 10px;
        background-color: #f5f5f5;
    }   


    // coment star
    .comment{
        width: 100%;
        

        .total{
            font-size: 13px;
            height: 40px;
            line-height: 40px;
            margin-left: 15px;
            margin-bottom: 10px;
        }

        .com-main{
            
            width: 95%;
            margin: 25px auto;
            
            display: flex;
            border-bottom: 1px solid #dddddd;



            .com-icon{
                width: 10%;
                display: flex;
                justify-content: center;
                

                img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }

            
            }

            .com-content{
                margin-left: 10px;
                line-height: 25px;
                font-size: 14px;
                width: 90%;
                .cont-top{
                    display: flex;
                    justify-content: space-between;

                    img{
                        display: block;
                        width: 20px;
                        height: 20px;
                    }
                }

                .cont-middle{
                    text-align: justify;
                    max-width: 95%;
                   color: #000000;
                }

                .cont-bottom{
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    margin-bottom: 10px;
                    color:#bfbfbf;

                }



            }




        }






        .nomore{
            line-height: 80px;
            height: 100px;
            text-align: center;
            font-size: 14px;
            color: #c7c7c7;
            

        }


    }
    // comment end

    .bottom{
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        border-top: 1px solid rgb(108, 107, 107);
        position: fixed;
        bottom: 0px;


    

    .btn{
       text-align: center;
        width: 40px;
        line-height: 30px;
        position: fixed;
        height: 30px;
        right:8px;
        bottom: 8px;
        font-size: 13px;
        
    }


    .el-textarea{
        width: 85%;
       
    }

    textarea{
        
        width: 100%;
        background-color: #eeeeee;
        box-sizing: border-box;
        resize:none;
        outline:none;
        overflow: hidden;
        font-size: 14px;
        border: 1px solid #eeeeee;
        letter-spacing:2px ;
        border-radius: 3px;
        line-height: 20px;
        padding-left: 5px;
        
    }

    }
   


    

    

    }



</style>